<template>
  <view class="page-bg">
    <!-- 顶部栏 -->
    <view class="header-bar">
      <!-- <view class="header-title">供需信息平台</view> -->
      <!-- <up-search class="header-search" placeholder="请输入您需要搜索的信息" v-model="params.title" shape="round" bg-color="#f7f8fa"
        :show-action="false"></up-search> -->
        <!-- <up-search placeholder="请输入您需要搜索的信息"   ></up-search> -->
        <up-input class="header-search" prefixIcon="search" custom-style="background-color: #f7f8fa;padding:12rpx;" border="none" shape="circle"  :clearable="true" placeholder="请输入您需要搜索的信息" v-model="searchValue" @change="searchValueChange"></up-input>
      <!-- <view>
        <up-button type="primary" color="#165dff" icon="plus" text="发布"></up-button>
      </view> -->
    </view>

    <!-- 横向滚动tab -->
    <scroll-view class="tabs-bar" scroll-x>
      <view v-for="(tab, idx) in demandsType" :key="tab" :class="['tab-item', idx === activeTab ? 'active' : '']"
        @click="changeTab(tab,idx)">
        {{ tab.dictLabel }}
      </view>
    </scroll-view>
    <!-- 筛选 -->
    <view class="filter-card">
      <view class="filter-header">
        <view>筛选条件</view>
        <view class="filter-reset" @click="onReset">重置</view>
      </view>
      <view class="filter-row">
        <view style="flex: 1;">
          <view class="filter-label">信息类型</view>
          <picker :range="filterTypeList" @change="onFilterInfoChange">
            <view class="filter-picker">{{ filterTypeList[filterTypeIdx] }}</view>
          </picker>
        </view>
        <view style="flex: 1;">
          <view class="filter-label" style="margin-left: 40rpx;">发布时间</view>
          <picker :range="filterTimeList"  @change="onFilterTimeChange">
            <view class="filter-picker">{{ filterTimeList[filterTimeIdx] }}</view>
          </picker>
        </view>
      </view>
    </view>
    <!-- 信息列表 -->
    <view class="supply-list">
      <view class="supply-card" v-for="item in list" :key="item.id" @click="toDetail(item)" >
        <view class="card-header">
          <view class="tag tag-green" v-if="item.type ==1 || item.type ==2 ">
            {{ getDemandsLabel(item.type) }}
          </view>
          <view class="tag tag-orange" v-else>
            {{ getDemandsLabel(item.type) }}
          </view>
          <view class="card-date">{{ item.createTime }}</view>
        </view>
        <view class="card-title">
          {{ item.title }}
        </view>
        <view class="card-desc">
          {{ item.content }}
        </view>
        <view class="card-footer">
          <image class="company-avatar" :src="imgUrl+ item.logoUrl" />
          <view class="company-name">{{ item.enterpriseName }}</view>
          <view class="detail-link" >查看详情</view>
        </view>
      </view>
      <view v-if="list.length==0 " style="margin-top: 200rpx;">
        <up-empty mode="data" text="暂无数据">
        </up-empty>
      </view>
    </view>
    <tabbar :selected="1" />
  </view>
</template>

<script setup>
import { ref, computed,onMounted } from 'vue'
import {getDict,getSupplyList} from '@/api/index'
import {imgUrl} from '@/config/index.js'
import tabbar from '@/components/tabbar.vue'
import {onShow,onReachBottom,onPullDownRefresh } from '@dcloudio/uni-app'
onShow(() => {
  uni.hideTabBar()
  getSupplyList(params.value).then(res=>{
	  console.log(res);
    list.value =res.rows
    total.value =res.total
  })
})
onPullDownRefresh(()=>{
  params.value.pageNum=1
  getSupplyList(params.value).then(res=>{
    list.value =res.rows
  })
  uni.stopPullDownRefresh()
})
let total=ref(0)
onMounted(()=>{
  getDict('demand_type').then(res => {
    demandsType.value = res.data
    demandsType.value.unshift({ dictValue: '', dictLabel: '全部' })
  })
})
const searchValueChange=(e)=>{
  params.value.title=e
  params.value.pageNum=1
  getSupplyList(params.value).then(res=>{
    list.value =res.rows
  })
}
let demandsType = ref([])

let params=ref({
  pageNum:1,
  title: '',
  type: '',
  searchValue: '',
  bitTime:'',
  status:1
})
let searchData=ref('')
const activeTab = ref(0)
const changeTab=(tab,idx) => { 
  activeTab.value = idx
  params.value.type = demandsType.value[idx].dictValue
  getSupplyList(params.value).then(res=>{
    list.value =res.rows 
  })

}

const list = ref([])
const getDemandsLabel=(type)=>{ 
  let index=demandsType.value.findIndex(i=>i.dictValue==type)
  return index>-1?demandsType.value[index].dictLabel:''
}

const toDetail = (item) => {
  uni.navigateTo({ url: `/pages/supply/detail?id=${item.id}` })
}
const filterTypeList = ['全部类型', '供应', '需求']
const filterTimeList = ['全部时间', '近一天', '近一周', '近一月']
const filterTypeIdx = ref(0)
const filterTimeIdx = ref(0)

const onReset = () => {
  filterTypeIdx.value = 0
  filterTimeIdx.value = 0
  // 可重置params等筛选参数
  params.value = {
    pageNum:1,
    title: '',
    type: '',
    searchValue: '',
    bitTime:''
  }
  activeTab.value = 0
  getSupplyList(params.value).then(res=>{
    list.value =res.rows
  })
}
const onFilterInfoChange = (e) => {
  filterTypeIdx.value = e.detail.value
  params.value.searchValue=filterTypeIdx.value==0 ?'' :filterTypeIdx.value-1
  getSupplyList(params.value).then(res=>{
    list.value =res.rows
  })
}
const onFilterTimeChange = (e) => {
  filterTimeIdx.value = e.detail.value
  params.value.bitTime=filterTimeIdx.value==0 ?'' :filterTimeIdx.value-1
  getSupplyList(params.value).then(res=>{
    list.value =res.rows
  })
}
onReachBottom(()=>{
  loadMore()
})
const loadMore=()=>{
  if(total.value>list.value.length&&list.value.length>0){
    params.value.pageNum++
    getSupplyList(params.value).then(res=>{
      list.value =list.value.concat(res.rows)
    })
  }
	
}
</script>

<style scoped>
.page-bg {
  background: #f7f8fa;
  min-height: 100vh;
  padding-bottom: 120rpx;
  box-sizing: border-box;
  overflow: hidden; 
}
.header-bar {
  display: flex;
  align-items: center;
  padding: 24rpx ;
  background: #fff;
  gap: 18rpx;
}
.header-title {
  font-size: 36rpx;
  font-weight: bold;
  color: #222;
  margin-right: 18rpx;
  flex-shrink: 0;
}
.header-search {
  flex: 1;
  
}
.tabs-bar {
  display: flex;
  flex-direction: row;
  padding:12rpx;
  background: #fff;
  margin-bottom: 18rpx;
  white-space: nowrap;
  border-bottom: 1rpx solid #f0f0f0;
  box-sizing: border-box;
}
.tab-item {
  display: inline-block;
  padding: 18rpx 36rpx;
  font-size: 28rpx;
  color: #666;
  border-radius: 32rpx;
  margin-right: 18rpx;
  background: #f7f8fa;
  transition: background 0.2s, color 0.2s;
}
.tab-item.active {
  background: #3a7afe;
  color: #fff;
}
.supply-list {
  /* height: calc(100vh - 246rpx - 120rpx); */
  padding: 0 18rpx;
  box-sizing: border-box;
}
.supply-card {
  background: #fff;
  border-radius: 18rpx;
  box-shadow: 0 4rpx 24rpx 0 rgba(64,158,255,0.04);
  margin-top: 24rpx;
  padding: 24rpx 24rpx 18rpx 24rpx;
}
.card-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 8rpx;
}
.tag {
  font-size: 22rpx;
  padding: 4rpx 18rpx;
  border-radius: 12rpx;
  margin-right: 8rpx;
  display: inline-block;
}
.tag-green {
  background: #e6f9ea;
  color: #19be6b;
}
.tag-orange {
  background: #fff3e6;
  color: #faad14;
}
.card-date {
  color: #888;
  font-size: 24rpx;
}
.card-title {
  font-size: 30rpx;
  font-weight: bold;
  color: #222;
  margin-bottom: 8rpx;
}
.card-desc {
  font-size: 26rpx;
  color: #444;
  margin-bottom: 18rpx;
  line-height: 1.6;
}
.card-footer {
  display: flex;
  align-items: center;
  gap: 12rpx;
}
.company-avatar {
  width: 48rpx;
  height: 48rpx;
  border-radius: 50%;
  background: #f0f0f0;
}
.company-name {
  font-size: 26rpx;
  color: #666;
  margin-right: auto;
  margin-left: 8rpx;
}
.detail-link {
  color: #3a7afe;
  font-size: 26rpx;
  padding: 4rpx 12rpx;
  border-radius: 8rpx;
  background: #f4f8ff;
}
.filter-card {
  background: #fff;
  border-radius: 18rpx;
  margin: 18rpx 18rpx 0 18rpx;
  padding: 24rpx 24rpx 18rpx 24rpx;
  box-shadow: 0 4rpx 24rpx 0 rgba(64,158,255,0.04);
}
.filter-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-size: 28rpx;
  font-weight: bold;
  margin-bottom: 18rpx;
}
.filter-reset {
  color: #3a7afe;
  font-size: 26rpx;
}
.filter-row {
  display: flex;
  align-items: center;
  gap: 12rpx;
}
.filter-label {
  font-size: 26rpx;
  color: #888;
  margin-bottom: 12rpx;
}
.filter-picker {
  min-width: 180rpx;
  background: #fff;
  border-radius: 12rpx;
  padding: 16rpx 24rpx;
  font-size: 28rpx;
  color: #222;
  border: 1rpx solid #e5e6eb;
  margin-right: 12rpx;
}
</style>